<template>
  <view class="flex-col page">
    <view class="flex-row justify-between items-center group_2">
      <view class="flex-col items-center group_3">
        <text class="font text_2">👋 Hello!</text>
        <text class="mt-10 text_3" v-if="studentList.length > 0">{{ student_name }}</text>
        <text class="mt-10 text_3" v-else>小博视</text>
      </view>
      <view class="flex-col justify-start items-start relative group_4">
        <image
          class="image_4"
          :src="student_avatar"
        />
        <view class="section pos"></view>
      </view>
    </view>
    <view class="flex-col group_5">
      <text class="self-start text_4">近期到店</text>
      <view class="flex-col self-stretch mt-19">
        <view class="flex-row section_2" v-if="studentList.length <= 0 || appointInfo.day == ''">
          <view class="ml-20 flex-col flex-1 self-start" style="margin-left: 0px;" v-if="student_id == ''">
            <view class="flex-col self-start group_6" style="width: 100%;text-align: center;padding: 10vw 0vw">
              <button class="self-stretch text_7 mt-5" style="background-color: #e09f1f24;padding: 3vw 5vw" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">请登录查看个人信息</button>
            </view>
          </view>
          <view v-else>
            <view class="flex-col self-start group_6" style="width: 100%;text-align: center;padding: 10vw 0vw">
              <view class="self-stretch text_7 mt-5" style="padding: 3vw 5vw">暂无预约信息</view>
            </view>
          </view>
        </view>
        <view class="flex-row section_2" v-else>
          <view class="flex-col items-center section_3">
            <text class="text_6">{{appointInfo.day}}</text>
            <text class="font text_8 mt-17">{{appointInfo.month}}</text>
          </view>
          <view class="ml-20 flex-col flex-1 self-start">
            <view class="flex-col self-start group_6">
              <text class="self-start font_2 text_5">{{appointInfo.time}}</text>
              <text class="self-stretch text_7 mt-5">{{appointInfo.doctorName}} 视光师</text>
              <text class="self-start font_2 text_9 mt-5">{{appointInfo.shopName}}</text>
            </view>
          </view>
        </view>
        <view class="mt-34 flex-row justify-between section_4"  @click="gotoAsk()">
          <view class="flex-col items-start self-start group_7">
			  <text class="self-start font_div">你身边的</text>
			  <text class="self-start font_div">儿童眼科专家</text>
			  <text class="self-stretch text_div">报告解读 | 眼科医疗问诊 |治疗方案</text>
          </view>
          <image
            class="image_6"
            src="https://joyballet.oss-cn-beijing.aliyuncs.com/eyemanager/wechat/banner/index_doctor.png"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {
          qrcodeUrl: '',
          studentList: [],
          student_id: '',
          qrtext: '',
          student_name: '',
          appointInfo: [],
          student_avatar: 'https://alicdn.joyballet.cn/eyemanager/wechat/avatar/boy_avatar.jpg',
      };
    },
    onShareAppMessage() {
      return {
        title: '双博视预约码', // 分享标题
        path: '/pages/index/index', // 分享路径
        imageUrl: 'https://alicdn.joyballet.cn/eyemanager/wechat/logo.png', // 分享图片，这里使用生成的二维码图片
    	success: function(res) {
    		// 转发成功
    		console.log("转发成功:");
    	},
    	fail: function(res) {
    		// 转发失败
    		console.log("转发失败:");
    	}
      }
    },
    onShow() {
      this.wxlogin();
    },
    methods: {
        wxlogin() {
          if (uni.getStorageSync('islogout')) {
            this.qrcodeUrl = '';
            this.studentList = [];
            this.student_id = '';
            this.student_name = '';
            this.appointInfo = [];
            this.student_avatar = 'https://alicdn.joyballet.cn/eyemanager/wechat/avatar/boy_avatar.jpg';
            return 
          }
        	const that = this;
        	// 微信自动登录
        	uni.login({
        		success: (res) => {
        			if (res.code) {
        				// 向后台请求 openid
        				this.$http.GET('/admin/student/student/getOpenid', { code: res.code }, function (res) {
        					console.log('请求结果:', res.data);
        					const openid = res.data.openid;
        					uni.setStorageSync('openid', openid);
        					that.loginByOpenidGetStudentList();
        				}, function (res) {})
        			} else {
        				console.error('获取临时登录凭证失败');
        			}
        		},
        		fail: (err) => {
        			console.error('调用 uni.login 失败:', err);
        		}
        	});
        },
        getPhoneNumber(e) {
        	const that = this;
          uni.setStorageSync('islogout', false)
          const openid = uni.getStorageSync('openid') || '';
          this.$http.POST('/admin/student/student/getPhoneNumber', { code: e.detail.code, openid: openid }, function (res) {
              console.log('成功获取手机号信息');
          that.wxlogin();
          })
        },
        loginByOpenidGetStudentList() {
            const that = this;
            const openid = uni.getStorageSync('openid') || '';
            this.$http.POST('/admin/student/student/loginByOpenidGetStudentList', { openid: openid }, function (res) {
                that.studentList = Object.values(res.data);
                if (that.studentList.length > 0) {
                    that.student_id = that.studentList[0].id;
                    that.student_name = that.studentList[0].name;
                    that.student_avatar = that.studentList[0].avatar;
                }
                that.$http.GET('/admin/student/student/getLatestAppointment', {studentId: that.student_id}, function (res) {
                    console.log('getLatestAppointment', res)
                    if (res.code == 1000) {
                        that.appointInfo = res.data;
                    }
                })
            })
        },
        // 跳转到 Ask 页面
        gotoAsk() {
          uni.navigateTo({
            url: '/pages/huaban_18/huaban_18'
          })
        },
    },
  };
</script>

<style scoped lang="css">
 .font_div {
	 font-size: 20px;
	 font-family: SourceHanSerifCN;
	 line-height: 27px;
	 color: #0e1012;
 }
 .text_div {
   margin-top: 8px;
   color: #4a545e;
   font-size: 11px;
   font-family: NunitoSans;
   line-height: 15px;
 }
  .ml-20 text {
    padding: 5rpx 0rpx;
  }
  .ml-20 {
    padding: 20rpx 0rpx;
  }
  .ml-5 {
    margin-left: 10rpx;
  }
  .mt-19 {
    margin-top: 50rpx;
  }
  .mt-17 {
    margin-top: 34rpx;
  }
  .mt-5 {
    margin-top: 10rpx;
  }
  .mt-11 {
    margin-top: 22rpx;
  }
  .page {
    padding: 0rpx 8rpx 28rpx;
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .group {
    padding-left: 52rpx;
    padding-right: 28rpx;
  }
  .text {
    color: #141023;
    font-size: 30rpx;
    font-family: HarmonyOSSansSC;
    font-weight: 300;
    line-height: 22.62rpx;
  }
  .image {
    width: 34rpx;
    height: 22rpx;
  }
  .image_2 {
    width: 30rpx;
    height: 22rpx;
  }
  .image_3 {
    width: 48rpx;
    height: 22.66rpx;
  }
  .group_2 {
    margin-top: 0rpx;
    padding: 0 48rpx;
  }
  .group_3 {
    margin-bottom: 4rpx;
  }
  .font {
    font-size: 32rpx;
    font-family: NunitoSans;
    font-weight: 600;
  }
  .text_2 {
    color: #253141;
    line-height: 35.84rpx;
  }
  .text_3 {
    color: #253141;
    font-size: 54rpx;
    font-family: NunitoSans;
    font-weight: 700;
    line-height: 50.7rpx;
  }
  .group_4 {
    width: 110rpx;
  }
  .image_4 {
    border-radius: 36rpx;
    width: 96rpx;
    height: 96rpx;
  }
  .section {
    background-color: #1c6ba4;
    border-radius: 50%;
    width: 36rpx;
    height: 36rpx;
    border-left: solid 6rpx #ffffff;
    border-right: solid 6rpx #ffffff;
    border-top: solid 6rpx #ffffff;
    border-bottom: solid 6rpx #ffffff;
  }
  .pos {
    position: absolute;
    right: 0;
    top: 0;
  }
  .group_5 {
    margin-top: 88rpx;
    padding-left: 64rpx;
    padding-right: 28rpx;
  }
  .text_4 {
    color: #0e1012;
    font-size: 34rpx;
    font-family: NunitoSans;
    font-weight: 700;
    line-height: 32.1rpx;
  }
  .section_2 {
    padding: 60rpx 28rpx;
    background-color: #e09f1f24;
    border-radius: 56rpx;
  }
  .section_3 {
    padding: 56rpx 0;
    background-color: #43cf7c;
    border-radius: 52rpx;
    width: 161.68rpx;
    height: 198.5rpx;
  }
  .text_6 {
    color: #ffffff;
    font-size: 44rpx;
    font-family: NunitoSans;
    font-weight: 800;
    line-height: 31.76rpx;
  }
  .text_8 {
    color: #ffffff;
    line-height: 22.78rpx;
  }
  .image_5 {
    margin-right: 20rpx;
    width: 46rpx;
    height: 40rpx;
  }
  .group_6 {
    width: 340rpx;
  }
  .font_2 {
    font-size: 30rpx;
    font-family: NunitoSans;
    color: #000000;
  }
  .text_5 {
    font-size: 32rpx;
    line-height: 32rpx;
  }
  .text_7 {
    color: #000000;
    font-size: 38rpx;
    font-family: NunitoSans;
    font-weight: 700;
    line-height: 51.3rpx;
  }
  .text_9 {
    line-height: 27.96rpx;
  }
  .section_4 {
    padding: 50rpx 16rpx 0 48rpx;
    overflow: hidden;
    border-radius: 56rpx;
    background-color: #dcedf9;
    height: 338.76rpx;
  }
  .group_7 {
    margin-top: 44rpx;
  }
  .text_10 {
    color: #0e1012;
    font-size: 40rpx;
    font-family: NunitoSans;
    font-weight: 700;
    line-height: 37.88rpx;
  }
  .font_3 {
    font-size: 24rpx;
    font-family: NunitoSans;
    line-height: 22.24rpx;
    color: #7b8d9e;
  }
  .text_11 {
    color: #4a545e;
    font-size: 22rpx;
    line-height: 20.54rpx;
  }
  .image_6 {
    margin-bottom: -60rpx;
    width: 238rpx;
    height: 364rpx;
  }
  .equal-division {
    margin-top: 448rpx;
  }
  .group_8 {
    flex: 1 1 182.22rpx;
  }
  .equal-division-item {
    padding: 8rpx 0;
  }
  .image_7 {
    width: 48rpx;
    height: 48rpx;
  }
  .text_12 {
    color: #1c6ba4;
  }
</style>